{extend name="$admin_layout" /}
{block name="style"}
<style>
	.autocomplete-box{position:relative}
	.autocomplete-suggestions{position:absolute;background:#fff;padding:5px;}
	.autocomplete-suggestions .autocomplete-suggestion{	
		line-height:40px;
		font-size:18px;
		overflow:hidden;
		border-bottom:1px #dbdbdb dotted
	}
	.autocomplete-suggestions .autocomplete-suggestion img{	
		width:50px;
		height:50px;
		float:left
	}
</style>
{/block}
{block name="content"}
    <div class="row">
        <div class="col-md-12" id="vue_det">
            <div class="box nav-tabs-custom">
                <div class="box-body tab-content">
                    <form class="form row" name="form" id="form" parent_reload="1" action="{:url('',$url_param)}" method="post" data-validator-option="{timely:1, theme:'bootstrap'}">
                    <div class="tab-pane active" id="base">
<!--				  	  <div class="alert alert-info">{:lang('开发人员请参阅')} <a href="{:url('operation/system_message/document')}">{:lang('技术文档')}</a></div>	-->
                        <div class="block-content row">
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="">
                                <div class="col-xs-12 label-title" for="type">{:lang('接收会员')}</div>
                                <div class="col-xs-12 autocomplete-box" >
							   	    <input name="to_user_id" type="hidden"  />
                                    <input id="users" class="form-control"  />
                                </div>
								<div class="col-xs-12 text">{:lang('输入昵称|用户手机号自动搜索(站内信可以不填)')}</div>
                            </div>
							
							<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="">
                                <div class="col-xs-12 label-title" for="type">{:lang('消息类型')}</div>
                                <div class="col-sm-12">
                                    <select name="msg_type" class="form-control"  data-rule="required;" data-msg-required="{:lang('请选择消息类型')}" placeholder="{:lang('请选择消息类型')}" >
										{volist name="$types" id="item"}
										
											<option value="{$item.id}">{$item.name}</option>
										{/volist}
									</select>		
                                </div>
                            </div>
						   <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="">
                                <div class="col-xs-12 label-title" for="type">{:lang('消息标题')}</div>
                                <div class="col-sm-12">
                                    <input name="title" class="form-control" placeholder="{:lang('请输入消息标题')}" />
                                </div>
                            </div>
                            <div style="display: none" class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_thumb">
                                <div class="col-xs-12 label-title" for="thumb" style="text-align: left;">{:lang('缩略图')}</div>
                                <div class="col-xs-12 js-upload-image">
                                    <div id="file_list_thumb" class="uploader-list" style="float:left;"></div>
                                    <input type="hidden" id="thumbVal" v-model="thumbId" name="thumb" data-rule="" data-multiple="false" data-watermark='' data-thumb='' data-size="0" data-ext='' data-msg-required="{:lang('请上传缩略图')}" />
                                    <div style="float:left" id="picker_thumb">{:lang('载入中')}...</div>
                                    <p style="float: left; padding: 90px 0 0 10px">{:lang('请上传尺寸大小为')}400*400{:lang('的图片')}</p>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
							   <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="">
                                <div class="col-xs-12 label-title" for="type">{:lang('消息内容')}</div>
                                <div class="col-sm-12">
                                    <textarea name="content" class="form-control" placeholder="{:lang('请输入消息内容')}" rows="4"></textarea>
                                </div>
                            </div>
							<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12"  style="display: none" id="">
								<div class="col-xs-12 label-title" for="type">{:lang('消息动作')}</div>
                                <div class="col-sm-12">
                                    <select name="action" class="form-control"  data-rule="required;" data-msg-required="{:lang('请选择消息类型')}" placeholder="{:lang('请选择消息类型')}" id="action" >
										<option value="0">--{:lang('无动作')}--</option>
										{volist name="$action" id="item"}										
											<option value="{$item.id}" data-rules="{$item.rule}">{$item.name}</option>
										{/volist}
									</select>		
                                </div>
                            </div>
							</div>
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="actions" style="display:none">
							<div class="col-xs-12 label-title" for="type">{:lang('动作配置')}</div>
                                <table class="table table-builder table-hover table-bordered table-striped mb10">
                                    <thead>  									   
                                        <th class="">{:lang('字段描述')}</th>  
										<th class="">{:lang('字段值')}</th>  										
                                    </thead>
                                    <tbody class="fields">      
								  
                                    </tbody>
                                </table>                          
                            </div>
                            <div class="block-content row">
                                <div class="form-group col-md-12 col-xs-12">
                                    <div class="col-xs-12">
                                        <button class="btn btn-primary " type="submit"> {:lang('提交')} </button>
                                        <button class="btn btn-default " type="button" onclick="javascript:history.back(-1);return false;"> {:lang('返回')} </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>

             </div>
        </div>
    </div>

{/block}
{block name="script"}

<script src="__PLUG__/jquery-auto-complete/jquery.auto-complete.min.js?v={:config('asset_version')}"></script>

<script >
(function(){
	$("#users").autoComplete({
		minChars:1,
	    delay : 150,
	    source: function(term, suggest){
				term = term.toLowerCase();
				$.get('{:url("users")}',{q:term},function(result){	
					suggest(result.data);   
				})
		},
		renderItem: function (item, search){         
            return '<div class="autocomplete-suggestion" data-val="' + item.id + '" data-label="' + item.user_nickname + '"><img src="'+item.head_img+'">' + item.user_nickname + '</div>';
        },
		onSelect: function(e, term, item){
		    $("input[name='to_user_id']").val(item.data('val'))
		   	$("#users").val(item.data('label'))
		}
	})

	$("#action").change(function(){
		$("#actions").find(".fields").html("");
		var rules = $(this).find("option:selected").data("rules");
		console.log(rules)
		if(!rules){		
			$("#actions").hide()
			return 
		}
		rules.forEach(function(item){		
			var t ='<tr>'
				+ '<td class="">' + item.msg +'</td>'
				+'<td class=""> <input name="custom['+ item.field +']" class="form-control" data-rule="required;" data-msg-required="请输入值" placeholder="请输入值"/></td></td>'			
				+'</tr>'
			  $(".fields").append(t)	
		
		})
		$("#actions").show()

	})

})()
</script>
{/block}


